<template>
    <el-row class="serverIoLoad">
        <el-col :span="24" class="serverIoLoad-box">
            <div id="IoLoad" ref="IoLoad" class="serverIoLine"></div>
        </el-col>
        <el-col :span="24" class="serverIoText-box">
            <div class="textIo">总：{{TOTAL}} MB </div>
           
            <div class="textIo">使用：{{USED}} MB</div>
            
            <div class="textIo">空闲：{{FREE}} MB</div>
        </el-col>
    </el-row>
</template>>

<script>
import { fetchData,getSwapSpace } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'hostCpuMemory',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "228B951118944B3DA53D6AA9FC14DA79",
                },
            },
            ioUsage: '25%',
            ioWait: '5%',
            date : [],
            IoLoad: {},
            TOTAL:'',
            FREE:'',
            USED:'',
            TOTALData : this.TOTALDataTest(),
            FREEData : this.FREEDataTest(),
            USEDData : this.USEDDataTest(),
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '8%',
                    left: '13%',
                    height: '90%',
                    width: '83%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel:{
                        show: false
                    },
                    data: this.testData(),
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    interval: 4096,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted',
                            color: 'rgb(145, 199, 174)',
                        }
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                    
                },
                series: [{
                    name: '总',
                    data: this.TOTALData,
                    type: 'line',
                    color: 'rgb(194, 131, 213)',
                    showSymbol: false,
                },
                {
                    name: '空闲',
                    data: this.FREEData,
                    type: 'line',
                    color: 'rgb(211, 84, 0)',
                    showSymbol: false,
                },
                {
                    name: '使用',
                    data: this.USEDData,
                    type: 'line',
                    color: 'rgb(39, 174, 96)',
                    showSymbol: false,
                }]
            },
            timerName: 'SwapSpace',
            timerEventName: 'timerSwapSpace',
            timerInterval: 1000 * 3
        }
    },
    created() {
        // this.getData();

        bus.$on('selectedMonIDServer', msg => {
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
            this.initGetData();
            this.getData();
        });
        

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                this.getData();
                this.TOTALData.shift();
                this.TOTALData.push(this.TOTAL);
                this.FREEData.shift();
                this.FREEData.push(this.FREE);
                this.USEDData.shift();
                this.USEDData.push(this.USED);
                this.EChartsOption.xAxis.data.shift();
                this.EChartsOption.xAxis.data.push(axisData);
                this.IoLoad.setOption({
                    xAxis: {
                        data: this.EChartsOption.xAxis.data
                    },
                    series: [
                        {
                            data: this.TOTALData
                        },
                        {
                            data: this.FREEData
                        },
                        {
                            data: this.USEDData
                        }
                    ]
                })
            }
        });
    },
    mounted() {
        // this.IoLoad = this.$echarts.init(this.$refs.IoLoad);
        // this.drawCPULine();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.IoLoad);
            myEchart.resize();
        }
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        initGetData(){
            getSwapSpace({
                hid:this.postData.filters.monid
            }).then((res) => {
                let _TOTALData = [];
                let _FREEData = [];
                let _USEDData = [];
                let _str = [];
                if (res.length > 0) {
                    res.forEach((element,i) => {
                        _TOTALData.push(res[i].totalGb);
                    _FREEData.push(res[i].freeGb);
                    _USEDData.push(res[i].usedGb);
                    _str.push(res[i].recordTime);
                    });
                    this.TOTALData = _TOTALData;
                this.FREEData = _FREEData;
                this.USEDData = _USEDData;
                this.EChartsOption.xAxis.data = _str;
                    
                }
                this.myEchart()
            });
        },
        getData(){
            
            getSwapSpace({
                hid:this.postData.filters.monid
            }).then((res) => {
                
                if (res.length > 0) {
                    this.TOTAL = res[0].totalGb;
                    this.FREE = res[0].freeGb;
                    this.USED = res[0].usedGb;
                    this.TOTALData.push(res[0].totalGb);
                    this.FREEData.push(res[0].freeGb);
                    this.USEDData.push(res[0].usedGb);
                    let _str = res[0].recordTime.replace(/\s+/g,"\n");
                    this.EChartsOption.xAxis.data.push(_str);
                }
                else {
                    this.TOTAL = '';
                    this.FREE = '';
                    this.USED = '';
                    this.TOTALData=[]
                    this.FREEData=[]
                    this.USEDData=[]
                }
            });

        },
        drawCPULine(){
            this.IoLoad.setOption(this.EChartsOption);
        },
		myEchart(){
		let myChart = this.$echarts.init(this.$refs.IoLoad);
		const option = {
			animationDuration: 100,
			animationEasingUpdate: 'quinticInOut',
			tooltip: {
			    trigger: 'axis',
			},
			grid: {
			    top: '8%',
			    left: '13%',
			    height: '90%',
			    width: '83%',
			    // containLabel: true
			},
			xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    splitLine: {
			        show: false,
			        lineStyle: false
			    },
			    axisTick: {
			        show: false
			    },
			    axisLabel:{
			        show: false
			    },
			    data: this.testData(),
			    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
			},
			yAxis: {
			    type: 'value',
			    min: 0,
			    interval: 4096,
			    boundaryGap: ['5%', '5%'],
			    splitLine: {
			        show: true,
			        lineStyle: {
			            opacity: 0.4,
			            type: 'dotted',
			            color: 'rgb(145, 199, 174)',
			        }
			    },
			    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
			    
			},
			series: [{
			    name: '总',
			    data: this.TOTALData,
			    type: 'line',
			    color: 'rgb(194, 131, 213)',
			    showSymbol: false,
			},
			{
			    name: '空闲',
			    data: this.FREEData,
			    type: 'line',
			    color: 'rgb(211, 84, 0)',
			    showSymbol: false,
			},
			{
			    name: '使用',
			    data: this.USEDData,
			    type: 'line',
			    color: 'rgb(39, 174, 96)',
			    showSymbol: false,
			}]
			};
			myChart.setOption(option);
		},
        testData() {
            let _arr = [];
            for (let i = 0; i < 60; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        TOTALDataTest() {
            let _arr = new Array(60);
            
            return _arr;
        },
        FREEDataTest() {
            let _arr = new Array(60);
            
            return _arr;
        },
        USEDDataTest() {
            let _arr = new Array(60);
            
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.IoLoad.dispose();
    },
    // watch:{
    //     'EChartsOption': {
    //         handler: function () {
    //             this.drawCPULine();
    //         },
    //         deep: true
    //     }
    // }
}
</script>
<style scoped>
.serverIoLoad{
    height: 83%;
    margin-bottom: 0 !important;
}
.serverIoLoad-box{
    height: 80%;
    
}
.serverIoLine{
    height: 100%;
}
.serverIoText-box{
    height: auto;
    display: flex;
   flex-direction: row;
   justify-content: center;
}
.textIo{
    color: seashell;
    /* font-size: large; */
    font-weight: bold;
    margin-left:15px ;
}
</style>